<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="velocity.js"></script>
</head>
<body>
    <div id="app">
        <input placeholder="请输入要查找的内容" v-model="query">
        <transition-group name="item" tag="ul" @before-enter="beforeEnter"
        @enter="enter" @leave="leave" v-bind:css="false">
        <li v-for="(item,index) in ComputedList" :key="item.msg":data-index="index">
            {{ item.msg }}
        </li>
        </transition-group>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    query:'',
                    items:[
                        {msg:'张三'},{msg:'李四'},{msg:'张芳芳'},{msg:'王琳琳'},{msg:'冯圆'}
                    ]
                }
            },
            computed:{
                ComputedList(){ 
                    var vm = this.query
                    var nameList = this.items
                    return nameList.filter(function (item){
                        return item.msg.toLowerCase().indexOf(vm.toLowerCase())!==-1
                    })
                }
            },
            methods:{
                beforeEnter(el){
                    el.style.opacity = 0
                    el.style.height = 0
                },
                enter(el,done){
                    var delay = el.dataset.index*150
                    setTimeout(function(){
                        Velocity(el,{opacity:1,height:'1.6em'},{complete:done})
                    },delay)
                },
                leave(el,done){
                    var delay = el.dataset.index*150
                    setTimeout(function(){
                        Velocity(el,{opacity:0,height:0},{complete:done})
                    },delay)
                }
            }
        })
    </script>
</body>
</html>